<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>本月新签约客户</title>
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />

  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="./css/font.css">
  <link rel="stylesheet" href="./css/xadmin.css">
  <link rel="stylesheet" href="./css/style.css">
  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/echarts.min.js" charset="utf-8"></script>
</head>

<body>
  <!--折线图-->
  <div id="main" class="left" style="width: 69%;height:400px;"></div>

  <!--环形图-->

  <div id="mains" class="left" style="width: 26%;height: 350px;margin-left: 5%;margin-top: 20px"></div>
  <script>
    var myChart = echarts.init(document.getElementById('mains'));

    var option = {
      tooltip: {
        trigger: 'item',
        formatter: "{d}%"
      },
      legend: {
        orient: 'vertical',
        x: 'left',
        data: ['SEO网站', '新媒体', '同业合作', '广告竞价', '个人', '其他']
      },
      series: [{
          name: '访问来源',
          type: 'pie',
          selectedMode: 'single',
          radius: [0, '30%'],

          label: {
            normal: {
              position: 'inner'
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          }
        },
        {
          name: '访问来源',
          type: 'pie',
          radius: ['40%', '55%'],
          label: {
            normal: {
              formatter: '{d}%',
              backgroundColor: '#eee',
              borderColor: '#aaa',
              borderWidth: 1,
              borderRadius: 4,
              // shadowBlur:3,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2,
              // shadowColor: '#999',
              // padding: [0, 7],
              rich: {
                a: {
                  color: '#999',
                  lineHeight: 22,
                  align: 'center'
                },
                // abg: {
                //     backgroundColor: '#333',
                //     width: '100%',
                //     align: 'right',
                //     height: 22,
                //     borderRadius: [4, 4, 0, 0]
                // },
                hr: {
                  borderColor: '#aaa',
                  width: '100%',
                  borderWidth: 0.5,
                  height: 0
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33
                },
                per: {
                  color: '#eee',
                  backgroundColor: '#334455',
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            }
          },
          data: [{
              value: 335,
              name: 'SEO网站'
            },
            {
              value: 310,
              name: '新媒体'
            },
            {
              value: 234,
              name: '同业合作'
            },
            {
              value: 135,
              name: '广告竞价'
            },
            {
              value: 1048,
              name: '个人'
            },
            {
              value: 251,
              name: '其他'
            },
          ]
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>


  <!--这是折线图-->
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '本月新增意向客户'
      },
      tooltip: {
        trigger: 'axis'
      },

      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['09-01', '09-02', '09-03', '09-04', '09-05', '09-06', '09-07']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
          name: '新签单客户',
          type: 'line',
          stack: '总量',
          data: [5, 34, 2, 0, 7, 3, 22]
        }

      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>
</body>

</html>
